<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.0.0.js"></script>
    <script>
		$(function(){
			var element = document.getElementById("content");
			element.addEventListener('paste', function (e) {
				//alert(e);
				if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image') > -1) {
					var file = e.clipboardData.items[0].getAsFile();
					//var str =  e.clipboardData.items[0].getAsString();
					//alert(file);
					//alert(str);
					addImage(file);
				}
			});

			$("#show").bind("paste",function(e,data){
				// originalEvent 原始的事件对象
				var clipboardData = e.originalEvent.clipboardData;
				if (clipboardData && clipboardData.items[0].type.indexOf('image') > -1) {
				var file = clipboardData.items[0].getAsFile();
					addImage(file);
				}
			})
		});


		// 将图片加载至浏览器中,并且显示出来
		function addImage(file){

		    // 创建 一个FileReader对象
		    var reader = new FileReader();
		    // 读取文件作为URL可访问地址
		    reader.readAsDataURL(file);

		    // 监控读取加载过程 
		    reader.onprogress =function(e){

		    	// 是否支持获取当前读取文件长度
		        if(e.lengthComputable){

		            // 将新创建的一个展示区域元素存放在 reader.uploadBox 中
		            reader.uploadBox = reader.uploadBox || $('<div class="upload-box"></div>').insertBefore('#content');
		            // 读取进度显示
		            reader.uploadBox.text(Math.ceil((e.loaded / e.total) * 100) +"%");

		        }
		    }
		    //异步加载文件成功
		    reader.onload = function(e){
		       // this 对象为reader
		       // reader.result 表示图片地址
		       reader.uploadBox.wrapInner('<img style="width:20%;height:20%; padding:.2rem;" src="'+reader.result+'" alt="'+file.name+'" />');
		       //获取base64编码
		       //reader.readAsDataURL(file);
		    }

		}
    </script>
</head>
<body>
    <textarea id="content" cols="50" rows="20">

    </textarea>

    <textarea id="show" cols="50" rows="20">

    </textarea>
</body>
</html>